<template>
  <div>
    <header>
      <span>商品管理</span>
      <el-button type="primary" icon="el-icon-plus" class="add" @click="addProduct">添加商品</el-button>
    </header>
    <div class="find">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formInline.type">
            <el-option label="按商品id查询" value="id"></el-option>
            <el-option label="按商品名称查询" value="name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input v-model="formInline.value" placeholder="关键词"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="contnet">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column label="信息">
          <template slot-scope="scope">
            <div>{{scope.row.name}}</div>
            <div>{{scope.row.subtitle}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.status==1?"在售":"已下架"}}</span>
            <el-button
              @click="handleClick(scope.row)"
              type="warning"
              size="small"
              style="padding:5px;marginLeft:10px"
            >{{scope.row.status==1?"下架":"上架"}}</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="toCheckProductInfo(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="toEditProductInfo(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        background
        class="pagination"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { productList, searchProduct, setSallStatus } from "../../util/netWork";
export default {
  data() {
    return {
      formInline: {
        type: "id",
        value: ""
      },
      currentPage: 1,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      flag:false
    };
  },
  methods: {
    toCheckProductInfo(row) {
        this.$router.push({
            name:"CheckProductInfo",
            params:{
                data:row
            }
        })
    },
    toEditProductInfo(row) {
      this.$router.push({
            name:"EditProductInfo",
            params:{
                data:row
            }
        })
    },
    addProduct(){
      this.$router.push("/addProduct")
    },
    onSubmit() {
      this.flag=true;
      var data = {};
      if (this.formInline.type == "id") {
        data.productId = this.formInline.value;
      } else {
        data.productName = this.formInline.value;
        data.pageNum=this.pageNum;
      }
      searchProduct(data).then(res => {
        if (res.status == 0) {
          console.log(res)
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.pagesize = res.data.pagesize;
        } else {
          console.log(res.msg);
        }
      });
    },
    // 管理商品上下架
    handleClick(row) {
      //   console.log(row);
      var data = {
        productId: row.id,
        status: row.status == 1 ? 2 : 1
      };
      // console.log(data)
      setSallStatus(data).then(res => {
        if (res.status == 0) {
          // console.log(res);
          this.http();
        } else {
          // alert(res.msg)
          console.log(res);
        }
      });
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.pageNum = val;
      // this.http();
      if(this.flag){
        this.onSubmit();
      }else{
        this.http();
      }
    },
    http() {
      var data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      productList(data).then(res => {
        if (res.status == 0) {
          // console.log(res.data)
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.pagesize = res.data.pagesize;
        } else {
          alert(res.msg);
        }
      });
    }
  },
  mounted() {
    this.http();
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/mixinScss.scss";
header {
  @include FontSize(30px);
  @include Size(100%, 100px);
  line-height: 100px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .add {
    padding: 10px 5px;
  }
}
.pagination {
  @include Size(100%, 50px);
  text-align: center;
  @include Margin(20px, 0);
}
</style>